<script setup lang="ts">
defineProps(['visible', 'zIndex']);
</script>

<template>
    <Transition name="q-fade" appear>
        <div v-show="visible" class="m-dialog__mask" :style="{ 'z-index': zIndex }"></div>
    </Transition>
</template>

<style lang="scss" scoped>
@include b(m-dialog) {
    @include e(mask) {
        position: fixed;
        inset: 0;
        width: 100%;
        margin: auto;
        background: var(--q-bg-color-mask);
    }
}

/* mask fade */
.q-fade-enter-from,
.q-fade-leave-to {
    opacity: 0;
}

.q-fade-enter-active,
.q-fade-leave-active {
    transition: opacity 0.3s;
}
</style>
